<template>
<section>
    <Search :searchList="searchList" @search="search" ref="search">

    </Search>

    <div class="table">
        <el-table ref="singleTable" @select="select" :data="audits" highlight-current-row v-loading="listLoading" style="width: 100%;" max-height="490" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column type="index" label="列号" width="65">
            </el-table-column>
            <el-table-column prop="UserName" label="用户名">
            </el-table-column>
            <el-table-column prop="ServiceName" label="服务名">
            </el-table-column>
            <el-table-column prop="MethodName" label="方法名">
            </el-table-column>
            <el-table-column prop="ExecutionDuration" label="持续时间ms" align="center" :formatter="formatExecutionDuration">
            </el-table-column>
            <el-table-column prop="ClientIPAddress" label="Ip">
            </el-table-column>
            <el-table-column prop="DisplayName" label="显示名字">
            </el-table-column>
            <el-table-column prop="ExecutionTime" label="执行时间" :formatter="formatTime">
            </el-table-column>
        </el-table>

    </div>
    <!--列表-->

    <el-col :span="24" class="paging">

        <el-pagination background layout="total,prev, pager, next" :page-size='pageSize' :total="total" :current-page="page" @current-change="currentChange" style="text-align:center;">
        </el-pagination>
    </el-col>

</section>
</template>

<script>
import util from '@/common/js/util'
import Search from '@/views/Search.vue'

import Paging from '@/components/Paging'
//import NProgress from 'nprogress'
import {
    getAuditListPage,

} from '@/api/api';
export default {

    data() {
        return {
            searchList: [{

                value: "",
                name: "ExecutionTime",
                title: "执行时间",
                valueType: "",
                type: "datetime",
                operator: ">="
            }, {

                value: "",
                name: "ExecutionTime",
                title: "至",
                valueType: "",
                type: "datetime",
                operator: "<="
            }],
            audits: [],
            total: 0,
            page: 1,
            pageSize: 10,
            listLoading: false,
            isChangePage: false,
            loading: false,

            selection: []
            //filters = [],

        }
    },
    components: {
        Search,
        Paging
    },
    methods: {

        search: function (data) {
            this.getAudit(data);
        },

        formatTime: function (row, column, cellValue, index) {
            if (cellValue == null) return cellValue;
            var crtTime = new Date(cellValue);
            return util.formatDate.dateFtt("yyyy-MM-dd hh:mm:ss", crtTime); //直接调用公共JS里面的时间类处理的办法     
        },

        formatExecutionDuration: function (row, column, cellValue, index) {
            return `${cellValue}ms`
        },
        currentChange: function (row) {
            this.page = row;
            this.getAudit();
        },

        //获取用户列表
        getAudit(filters) {
            let newFilters = filters || [];
            let para = {
                pageIndex: newFilters.length > 0 ? 1 : this.page,
                pageSize: this.pageSize,
                filters: newFilters,
            };

            this.listLoading = true;
            //NProgress.start();
            getAuditListPage(para).then((res) => {
                if (!util.isEmt.format(res)) {
                    if (res.success) {
                        this.total = res.total;
                        this.audits = res.data;
                    }

                }

                this.listLoading = false;
                //NProgress.done();
            });
        },
        select: function (selection, row) {

            this.selection = selection;
        },

    },

    mounted() {
        this.getAudit();

    }
}
</script>

<style scoped>

</style>
